<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<base href="<%=basePath%>">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<%@include file="/esayuiStyle.jsp" %>
</head>
<script type="text/javascript">
	$(function(){
		$("#roleTable").datagrid({
			pagination:true,
			toolbar:'#tb',
			idField:"id",
			onLoadSuccess:function(){
				$("a.op").tooltip({
					position:'right'
				});
			}
		})
	})

	function roleSetCondition(){
		var postData = {name:$("#roleName").val()};
		$("#roleTable").datagrid("reload",postData);
	}
	
	function opFormatter(value,row,index){
		return "<a href='javascript:void(0)' title='分配权限' onclick='assignPermission("+row.id+");' class='op'><img src='easyui/themes/icons/large_chart.png' width='16'/></a>";
	}
	
	function assignPermission(roleId){
		$("#roleTable").datagrid("clearSelections");
		var d = $("<div></div>").appendTo("body");
		d.dialog({
			title:"分配权限",
			width:250,
			height:350,
			href:"role/toAssign?rid="+roleId,
			onClose:function(){$(this).dialog("destroy")},
			buttons:[{
				iconCls:"icon-ok",
				text:"确定",
				handler:function(){
					//获取选中的节点：checked indeterminate
					var nodes = $("#assignTree").tree("getChecked","checked");
					var half_nodes = $("#assignTree").tree("getChecked","indeterminate");
					$.merge(nodes,half_nodes);
					//获取选中节点的编号，权限编号
					var postData = "";
					for(var i = 0; i < nodes.length; i++){
						postData += "ids="+nodes[i].id + "&";
					}
					postData += "roleId="+roleId;
					//发送异步请求，带角色编号、一组权限编号
					$.post("role/assign",postData,function(data){
						$.messager.show({
							title:'提示',
							msg:'授权成功！重新登录后生效！',
							timeout:5000,
							showType:'slide'
						});
						d.dialog("close");
						//弹框提示
					}) 
				}
			},{
				iconCls:"icon-cancel",
				text:"取消",
				handler:function(){
					d.dialog("close");
				}
			}]
			
		})
	}
	
	function addRole(){
		var d = $("<div></div>").appendTo("body");
		d.dialog({
			title : "添加角色",
			iconCls : "icon-add",
			width:400,
			height:200,
			modal:true,
			href:"role/roleForm",
			onClose:function(){$(this).dialog("destroy");},
			buttons:[{
				iconCls:"icon-ok",
				text:"确定",
				handler:function(){
					$("#roleForm").form("submit",{
						url:"role/addRole",
						success:function(data){
							d.dialog("close");
							$("#roleTable").datagrid("reload");
						}
					})
				}
			},{
				iconCls:"icon-cancel",
				text:"取消",
				handler:function(){
					d.dialog("close");
				}
			}]
		})
	}
	function deleteRole(){
		var selRows = $("#roleTable").datagrid("getSelections");
		if(selRows.length == 0){
			$.messager.alert("提示","请选择要删除的数据行！","warning");
			return;
		}
		$.messager.confirm("提示","确定要删除选中的数据吗？",function(r){
			if(r){
				//发送异步请求
				//拼接删除条件
				var postData="";
				$.each(selRows,function(i){
					postData+="ids="+this.id;
					if(i<selRows.length-1){
						postData +="&";
					}
				});
				$.post("role/deleteRole",postData,function(data){
					if(data.result==true){
						alert(1);
							$("#roleTable").datagrid("reload");
						
					}
					
				})
				
			}
		})
	}
	
	function editRole(){
		var row = $("#roleTable").datagrid("getSelected");
		if(row ==null ){
			$.messager.alert("提示","请选择要修改的数据行！","warning");
			return;
		}
		$("#roleTable").datagrid("clearSelections");
		$("#roleTable").datagrid("selectRecord",row.id);
		var d = $("<div></div>").appendTo("body");
		d.dialog({
			title:"修改角色",
			iconCls:"icon-edit",
			width:400,
			height:200,
			modal:true,
			href:"role/roleForm",
			onClose:function(){$(this).dialog("destroy");},
			onLoad:function(){
				$.post("role/selectRoleById",{id:row.id},function(data){
					$("#roleForm").form("load",data);
				})
			},
			buttons:[{
				iconCls:"icon-ok",
				text:"确定",
				handler:function(){
					$("#roleForm").form("submit",{
						url:"role/editRole",
						success:function(data){
							d.dialog("close");
							$("#roleTable").datagrid("reload");
							
						}
					});
				}
			},{
				iconCls:"icon-cancel",
				text:"取消",
				handler:function(){
					d.dialog("close");
				}
			}]
		})
		
		
	}
	
	
	
</script>
<body>

<div id="tb">
	
	<form id="roleCondition">
	 	<input class="easyui-textbox" id="roleName" label="Name:" labelposition="left" style="width:250px;">
    	<a id="btn" href="javaScript:void(0)" onclick="roleSetCondition()" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">serch</a>
		<a  href="javaScript:void(0)" onclick="addRole()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
		<a  href="javaScript:void(0)" onclick="editRole()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
		<a  href="javaScript:void(0)" onclick="deleteRole()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
	   
	</form>
</div>
	<table id="roleTable" title="roleList" 
	    data-options="url:'role/listByCondition',fitColumns:true,striped:true,rownumbers:true,iconCls:'icon-search'">
	    
	    <thead>
			<tr>
				<th data-options="field:'asddsa',checkbox:true" ></th>
				<th data-options="field:'id',width:30,sortable:true,order:'desc'">Id</th>
				<th data-options="field:'name',width:100,sortable:true,order:'desc'	">name</th>
				<th data-options="field:'state',width:200">state</th>
				<th data-options="field:'hello',width:50,formatter:opFormatter">操作</th>
			</tr>
	    </thead>
	</table>
</body>
</html>